<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <link href="$!{__beat.server.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="$!{__beat.server.contextPath}/bootstrap/datepicker/datepicker3.css" rel="stylesheet">
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/App.css" type="text/css" />

    <meta charset="UTF-8">
    <title>AB测实时数据</title>
</head>
<body>
<div class="container-fluid">

    <form class="form-inline" action="$!{__beat.server.contextPath}/realtime/netflow/ab_test">
        <div class="form-group">
            <label>业务线</label>
            <select class="form-control" name="bussline" id="bussline">
                #foreach($op in $busslineList)
                    #if($!op != "")
                           <option value="$op" #if($!op == $!bussline) selected #end>$!business_CN_Map.get("$op")</option>
                    #end                       
                #end
                <option value="other" #if("other" == $!bussline) selected #end>其他</option>
            </select>
        </div>
        <div class="form-group">
            <label>平台</label>
                <select id="platform" name="platform" class="form-control input-sm" style="align:center; width:100px; ">
                        <option value="pc" #if("pc" == $!platform) selected #end>PC</option>
                        <option value="m"  #if("m" == $!platform) selected #end>M</option>
                        <option value="app" #if("app" == $!platform) selected #end>APP</option>
                </select>
            
            <label>页面类型</label>
                <select id="page_type" name="page_type" class="form-control input-sm" style="align:center; width:100px; ">
                    <option value="all" #if("all" == $!page_type) selected #end>all</option>
                    <option value="home" #if("home" == $!page_type) selected #end>home</option>
                    <option value="list"  #if("list" == $!page_type) selected #end>list</option>
                    <option value="detail"  #if("detail" == $!page_type) selected #end>detail</option>
                </select>
            </div>            
            <div class="form-group" style="width:180px">
                <label for="identity" style="padding-left:15px;">版本号：</label>
                <select id="identity" name="identity" class="form-control input-sm" style="align:center; width:100px; ">
                   #foreach($v in $versionList)
                        <option value="$!v.dic_key" #if("$!v.dic_key" == $!identity) selected #end>$!v.dic_key</option>
                    #end
                </select>
            </div>

            <label for="stat_date">日期: </label>
            <div class="form-group input-group input-group-sm" style="width: 13%;">
                <input name="stat_date" id="stat_date" type="text"  class="form-control input-sm time" placeholder="选择时间" data-date-end-date='0d' value="$!stat_date"/>
            </div>

        <div class="form-group">
            <input id='refresh' type="submit" value="查询" class="btn btn-primary btn-xs">
            <input id="addLine" type="button" value="添加对比" class="btn btn-primary btn-xs">
        </div>
    </form>
   
    <div class="row">
            <div id="pv" class="chart-div" style="height: 300px"></div>
    </div>
    <div class="row">
            <div id="uv" class="chart-div" style="height: 300px"></div>
    </div>

    <div class="row">>
            <div id="period_pv" class="chart-div" style="height: 300px"></div>
    </div>
    <div class="row">
            <div id="period_uv" class="chart-div" style="height: 300px"></div>
    </div>

</div>

</body>
<script src="$!{__beat.server.contextPath}/bootstrap/jquery.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/js/libs/bootstrap.min.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/bootstrap-datepicker.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/nongLiDate.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>

<script src="$!{__beat.server.contextPath}/echarts2/dist/echarts.js"></script>

<script type="text/javascript">
    var chartHieght = window.screen.availHeight * 0.43;
    // var chartHieght = window.screen.availHeight * 0.75;
    $(".chart-div").height(chartHieght);
var datepicker_op={
        format: "yyyy-mm-dd",
        clearBtn: false,
        language: "zh-CN",
        autoclose: true,
        todayHighlight: true,
        minViewMode:0,
        orientation: "top left"
    };
    $('#stat_date').datepicker(datepicker_op);
    require.config({paths: {echarts: '$!{__beat.server.contextPath}/echarts2/dist', dashboard: '$!{__beat.server.contextPath}/js/realtime'}});
        require(['dashboard/realtime_ab_test_v1'],function(obj){
        obj.start("ab_test");
    });
</script>
</html>